<template>
    <div class="app-container">
        <!-- 搜索区域 -->
        <el-card class="box-card" shadow="never">
            <i class="el-icon-search" style="font-size: 18px; margin-right: 6px;"></i>
            <span>筛选搜索</span>
            <el-button class="btn-clear" size="mini" style="float: right; margin-left: 10px;">清空</el-button>
            <el-button type="primary" class="btn-find" size="mini" style="float: right;">查询</el-button>
            <div style="margin-top: 30px">
                <el-form :model="listQuery" ref="productForm" label-width="150px" :inline="true">
                    <el-form-item label="商品货号：">
                        <el-input v-model="listQuery.productSn" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="商品所属分类：">
                        <el-cascader
                                v-model="productCateValue"
                                :options="productCateOptions"
                                :props="{ expandTrigger: 'hover' }"  style="width: 150px"></el-cascader>
                    </el-form-item>
                    <el-form-item label="上架状态：">
                        <el-select  v-model="listQuery.publishStatus" placeholder="请选择商品是否上架"  style="width: 150px">
                            <el-option v-for="item in publishStatusOptions" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品名称：">
                        <el-input v-model="listQuery.name"  style="width: 150px"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <!--表头和表格区域-->
        <div style="margin-top: 30px">
            <!--表头-->
            <el-card class="box-card" shadow="never">
                <i class="el-icon-s-order" style="font-size: 18px; margin-right: 6px;"></i>
                <span>商品列表</span>
                <el-button class="btn-add" size="mini" type="primary" style="float: right;" @click="$router.push('/pm/addProduct')">添加</el-button>
            </el-card>
            <!--表格-->
            <div class="table-container">
                <el-table
                        border
                        :data="dataList"
                        ref="multipleTable"
                        style="width: 100%"
                        :height="getHeight()"
                        v-loading="isLoading"
                        @selection-change="handleSelect"
                        @select-all="handleSelect"
                >
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="编号"
                            align="center"
                            width="100">
                        <template slot-scope="scope">
                            {{scope.row.id}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="商品图片"
                            align="center"
                            width="160">
                        <template slot-scope="scope">
                            <img :src="scope.row.pic" alt="" style="width: 80px; height: 80px;">
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="商品名称"
                            align="center"
                            width="200">
                        <template slot-scope="scope">
                            {{scope.row.name}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="价格/货号"
                            align="center"
                            width="180">
                        <template slot-scope="scope">
                            <p>市场价：{{scope.row.price}}</p>
                            <p>货号：{{scope.row.productSn}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center"
                            width="180">
                        <template slot-scope="scope">
                            <p>上架：<el-switch :active-value="scope.row.publishStatus" :inactive-value="0"></el-switch></p>
                            <p>新品：<el-switch :active-value="scope.row.newsStatus" :inactive-value="1"></el-switch></p>
                            <p>推荐：<el-switch :active-value="scope.row.recommendStatus" :inactive-value="0"></el-switch></p>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="销量"
                            align="center"
                            width="100">
                        <template slot-scope="scope">
                            {{scope.row.sale}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="存量"
                            align="center"
                            width="100">
                        <template slot-scope="scope">
                            {{scope.row.count}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <template slot-scope="scope">
                            <el-button size="mini">编辑</el-button>
                            <el-button size="mini" type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!--批量操作区域-->
        <div class="many-operate-container">
            <el-select size="small" placeholder="批量操作列表"  style="width: 150px">
                <el-option v-for="item in operates" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button style="margin-left: 10px;" size="mini" type="danger">确实</el-button>
        </div>

        <!--分页区域-->
        <div class="pagination-container">
            <el-pagination
                    layout="total,sizes,prev, pager, next,jumper"
                    :total="total"
                    :page-size="listQuery.pageSize"
                    :current-page="listQuery.pageNum"
                    :page-sizes="[5,10,15]"
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    let defaultQuery = {
        productSn:null, // 货号
        productCategoryId:null, // 所谓分类
        publishStatus:null, // 上架的状态
        name:null, // 商品名称
        pageNum:1, // 当前第几页
        pageSize:5, // 一页多少条数据
    }
    export default {
        name: "index",
        data(){
            return{
                listQuery:Object.assign({},defaultQuery),
                productCateValue:[],   // 代表你选中的分类数据
                productCateOptions:[],   // 分类的所有的数据
                publishStatusOptions:[
                    {value:1,label:"上架"},
                    {value:0,label:"下架"}
                ],
                dataList:[], // 表格中的数据源
                isLoading:false, // 发送ajax时的loading效果
                total:0, // 总记录数
                operates:[
                    {label:"批量上架",value:"publishOn"},
                    {label:"批量下架",value:"publishOff"},
                    {label:"批量推荐",value:"recommendOn"},
                    {label:"批量取消推荐",value:"recommendOff"},
                    {label:"批量上新",value:"newsOn"},
                    {label:"批量下新",value:"newsOff"},
                    {label:"批量删除",value:"manyDel"},
                ]
            }
        },
        methods:{
            // 计算表格的高度
            getHeight(){
                return window.innerHeight - 250;
            },
            // 合选 和 选中某一个用户
            handleSelect(select){

            },
            // 点击页码
            handlePageChange(val){
            },
            // 点击一页显示多少条
            handleSizeChange(val){
            },
        }
    }
</script>

<style scoped>

</style>